<template>
    <div class="main">
        <div class="cover"></div>
        <input type="checkbox" id="toggler" />
        <div class="circleyy"></div>
        <div class="circle">
            <div class="leftcircle"> </div>
            <div class="rightcircle"> </div>
        </div>
        <div class="background">
            <div class="dark">
                <div class="star stardiv"></div>
                <div class="star stardiv"></div>
                <div class="star stardiv"></div>
                <div class="star stardiv"></div>
                <div class="star stardiv"></div>
            </div>
            <div class="linght">
                <div class="scircle1"></div>
                <div class="scircle1"></div>
                <div class="scircle1"></div>
                <div class="scircle1"></div>
                <div class="scircle1"></div>
                <div class="scircle1"></div>
                <div class="scircle1"></div>

                <div class="scircle2"></div>
                <div class="scircle2"></div>
                <div class="scircle2"></div>
                <div class="scircle2"></div>
                <div class="scircle2"></div>
                <div class="scircle2"></div>
                <div class="scircle2"></div>
            </div>
        </div>
    </div>
</template>
<script setup>
 
</script>
<style lang="scss" scoped>
.star {
    width: 0px;
    height: 0px;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #fff;
    border-left: 10px solid transparent;
    transform: rotate(35deg);
    &::before {
        border-bottom: 10px solid #fff;
        border-left: 5px solid transparent;
        border-right: 10px solid transparent;
        position: absolute;
        height: 0;
        width: 0;
        top: -3px;
        left: -11px;
        display: block;
        content: "";
        transform: rotate(-35deg);
    }

    &::after {
        position: absolute;
        display: block;

        top: 3px;
        left: -13px;
        width: 0px;
        height: 0px;
        border-right: 10px solid transparent;
        border-bottom: 10px solid #fff;
        border-left: 10px solid transparent;
        transform: rotate(-70deg);
        content: "";
    }
}
.main {
    --divheight: 70px;
    --divwidth: 200px;

    overflow: hidden;
    width: var(--divwidth);
    height: var(--divheight);
    line-height: var(--divheight);
    background-color: white;
    border-radius: 38px;

    position: relative;
    z-index: 1;
    .cover {
        position: absolute;
        z-index: 11;
        width: var(--divwidth);
        height: var(--divheight);
        border-radius: 38px;
        box-shadow: inset 0px 3px 9px 0px #000, inset 0px -2px 9px 0px #ffff;
    }
    .circleyy {
        left: 0px;
        z-index: 10;
        top: -10px;
        opacity: 0.4;
        position: absolute;
        border-radius: 50%;
        height: calc(var(--divheight) + 20px);
        width: calc(var(--divheight) + 20px);
        background-color: #ffff;
        transition: all 1s cubic-bezier(0.41, -0.27, 0.47, 1.38);
        &::after {
            content: "";
            z-index: 11;
            left: 25px;
            opacity: 0.5;
            position: absolute;
            border-radius: 50%;
            height: calc(var(--divheight) + 20px);
            width: calc(var(--divheight) + 20px);
            background-color: #ffff;
        }
    }
    .circle {
        left: 0px;
        position: relative;
        width: calc(var(--divheight));
        height: calc(var(--divheight));
        overflow: hidden;
        transition: all 1s cubic-bezier(0.41, -0.27, 0.47, 1.38);
        .leftcircle {
            position: absolute;
            z-index: 13;
            width: calc(var(--divheight) - 16px);
            height: calc(var(--divheight) - 16px);
            border-radius: 50%;
            background-color: rgb(240, 179, 88);
            box-shadow: 2px 2px 7px 0px #fff, 3px 4px 4px 0px #000,
                inset 0px -1px 6px 0px rgba(66, 64, 64, 0.4);
            top: 8px;
            left: 8px;
            //transition: all 0.4s cubic-bezier(0.41, -0.27, 0.47, 1.38);
        }

        .rightcircle {
            position: absolute;
            z-index: 13;
            width: calc(var(--divheight) - 16px);
            height: calc(var(--divheight) - 16px);
            border-radius: 50%;
            background-color: rgb(65, 64, 64);
            box-shadow: inset 2px 2px 4px -1px #fff, 1px 2px 4px 0px #000,
                inset 0px 0px 3px 0px #000;
            top: 8px;
            left: calc(var(--divwidth) - var(--divheight) + 8px);
            transition: all 1s cubic-bezier(0.41, -0.27, 0.47, 1.38);
            &::after {
                content: "";
                position: absolute;
                width: calc(var(--divheight) - 36px);
                height: calc(var(--divheight) - 36px);
                background-color: #fff;
                border-radius: 50%;
                top: 10px;
                left: 10px;
                z-index: 1;
            }
            &::before {
                content: "";
                position: absolute;
                width: calc(var(--divheight) - 36px);
                height: calc(var(--divheight) - 36px);
                background-color: rgb(65, 64, 64);
                border-radius: 50%;
                top: 7px;
                left: 18px;
                z-index: 2;
            }
        }
    }

    #toggler {
        cursor: pointer;
        width: calc(var(--divheight) - 16px);
        height: calc(var(--divheight) - 16px);
        position: absolute;
        z-index: 15;
        top: 8px;
        left: 8px;
        appearance: none;
        &:checked {
            left: unset;
            right: 8px !important;
        }
        &:checked ~ div[class="background"] {
            &[class="background"] {
                transform: translate(
                    -10px,
                    calc(calc(var(--divheight) + 3px) * -1)
                );
            }
        }
        &:checked ~ div[class="circle"] {
            left: calc(var(--divwidth) - var(--divheight));
            .rightcircle {
                left: 8px;
            }
        }
        &:checked ~ div[class="circleyy"] {
            left: calc(var(--divwidth) - var(--divheight) - 20px) !important;
            &::after {
                left: unset;
                right: 25px !important;
            }
        }
    }
    .background {
        transform: translate(
            calc(var(--divwidth) * -1),
            calc(var(--divheight) * -2)
        );
        transition: transform 0.6s cubic-bezier(0.41, -0.27, 0.47, 1.38);
        .dark {
            width: calc(var(--divwidth) * 2 + 10px);
            height: calc(var(--divheight) * 2);
            position: relative;
            z-index: 5;
            clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
            background-color: rgb(67, 65, 65);
            .stardiv {
                position: absolute;
                //filter: blur(2px) contrast(8);
                &:nth-child(1) {
                    left: 80px;
                    top: 25px;
                    transform: scale(0.9);
                }
                &:nth-child(2) {
                    left: 60px;
                    top: 10px;
                    transform: scale(0.5);
                }
                &:nth-child(3) {
                    left: 40px;
                    top: 24px;
                    transform: scale(0.5);
                }
                &:nth-child(4) {
                    left: 46px;
                    top: 40px;
                    transform: scale(0.5);
                }
                &:nth-child(5) {
                    left: 60px;
                    top: 50px;
                    transform: scale(0.5);
                }
            }
        }
        .linght {
            width: calc(var(--divwidth) * 2);
            height: calc(var(--divheight) * 2);
            position: relative;
            transform: translateY(calc(var(--divheight) * -2));
            z-index: 5;
            clip-path: polygon(100% 0%, 100% 100%, 0% 100%);
            background-color: rgb(7 114 237 / 50%);
            //overflow: hidden;
            .scircle1 {
                z-index: 7;
                position: absolute;
                border-radius: 50%;
                background-color: #fff;
                &:nth-child(1) {
                    width: 10px;
                    height: 10px;
                    right: 134px;
                    top: calc(var(--divheight) + 62px);
                }
                &:nth-child(2) {
                    width: 20px;
                    height: 20px;
                    right: 118px;
                    top: calc(var(--divheight) + 56px);
                }
                &:nth-child(3) {
                    width: 30px;
                    height: 30px;
                    right: 94px;
                    top: calc(var(--divheight) + 51px);
                }
                &:nth-child(4) {
                    width: 40px;
                    height: 40px;
                    right: 63px;
                    top: calc(var(--divheight) + 41px);
                }
                &:nth-child(5) {
                    width: 50px;
                    height: 50px;
                    top: calc(var(--divheight) + 33px);
                    right: 25px;
                }
                &:nth-child(6) {
                    width: 60px;
                    height: 60px;
                    top: calc(var(--divheight) + 20px);
                    right: -13px;
                }
                &:nth-child(7) {
                    width: 70px;
                    height: 70px;
                    top: calc(var(--divheight));
                    right: -40px;
                }
            }
            .scircle2 {
                z-index: 6;
                position: absolute;
                border-radius: 50%;
                background-color: rgb(133, 227, 250);
                &:nth-child(8) {
                    width: 10px;
                    height: 10px;
                    right: 154px;
                    top: calc(var(--divheight) + 62px);
                }
                &:nth-child(9) {
                    width: 20px;
                    height: 20px;
                    right: 135px;
                    top: calc(var(--divheight) + 56px);
                }
                &:nth-child(10) {
                    width: 30px;
                    height: 30px;
                    right: 115px;
                    top: calc(var(--divheight) + 48px);
                }
                &:nth-child(11) {
                    width: 40px;
                    height: 40px;
                    right: 87px;
                    top: calc(var(--divheight) + 38px);
                }
                &:nth-child(12) {
                    width: 50px;
                    height: 50px;
                    top: calc(var(--divheight) + 26px);
                    right: 49px;
                }
                &:nth-child(13) {
                    width: 60px;
                    height: 60px;
                    top: calc(var(--divheight) + 16px);
                    right: 20px;
                }
                &:nth-child(14) {
                    width: 70px;
                    height: 70px;
                    top: calc(var(--divheight));
                    right: -17px;
                }
            }
        }
    }
}
</style>